<template>
  <div class="activity-details">
    <nav-header>
      <template slot="menuBefore">
        <li>
          <router-link to="/life/events/school-activities" tag="a">校园活动</router-link>
        </li>
        <li class="gap">&gt;</li>
        <span>{{infoDetail.name}}</span>
      </template>
    </nav-header>
    <section class="details-container">
      <div class="common-title">
        <img class="tit-icon" src="../../../../static/image/life/events/base-info.png" alt="icon">
        <i class="tit-name">基本信息</i>
      </div>
      <div class="details-info">
        <ul>
          <li>
            <span class="title-name">活动主题：</span><span>{{infoDetail.name}}</span>
          </li>
          <li>
            <span class="title-name">活动封面：</span>
            <img class="poster-img" :src="BASE_URL+infoDetail.picture" alt="封面" :onerror="errorImg">
          </li>
          <li>
            <span class="title-name">发起人：</span><span><img class="avatar-img" :src="BASE_URL+infoDetail.avatar_path" alt="头像"><i class="creater-name">{{infoDetail.create_name}}</i></span>
          </li>
          <li>
            <span class="title-name">活动类型：</span><span>{{infoDetail.level_type==1?"校级活动":(infoDetail.level_type==2?"年级活动":"班级活动")}}</span>
          </li>
          <li v-if="infoDetail.level_type!=1">
            <span class="title-name">活动范围：</span>
            <span>{{infoDetail.all_org_name}}</span>
          </li>
          <li>
            <span class="title-name">活动对象：</span><span>
              <i v-for="(item,index) of infoDetail.role_info" :key="index">{{item.name}}&nbsp; </i>
            </span>
          </li>
          <li>
            <span class="title-name">活动时间：</span><span>{{infoDetail.start_time}} - {{infoDetail.end_time}}</span>
          </li>

          <li>
            <span class="title-name">活动地点：</span><span>{{infoDetail.place}}</span>
          </li>
          <li>
            <span class="title-name">活动名额：</span><span><i class="right-area">{{infoDetail.quota}}人</i> <i>已有{{infoDetail.quota_used_count}}人报名</i></span>
          </li>
          <li>
            <span class="title-name">活动组织方：</span><span>{{infoDetail.organizer}}</span>
          </li>
          <li>
            <span class="title-name">活动联系人：</span><span>{{infoDetail.responsibler}}</span>
          </li>
          <li>
            <span class="title-name">联系方式：</span><span>手机 {{infoDetail.telephone}}</span>
          </li>
          <li>
            <span class="title-name">在线报名：</span><span><i class="right-area">{{infoDetail.online=="0"?"否":"是"}}</i>
              <el-button type="text" v-if="infoDetail.online=='1'&&infoDetail.show_status_int=='4'" @click="checkRegistration(infoDetail.id)">查看名单</el-button>
            </span>
          </li>
          <li>
            <span class="title-name">报名起止时间：</span><span>{{infoDetail.registration_starttime}} - {{infoDetail.registration_endtime}}</span>
          </li>
          <li>
            <span class="title-name">报名信息：</span><span>
              <i class="right-area" v-for="(item,index) of infoDetail.registration_information" :key="index">{{item.value}}</i>
            </span>
          </li>
        </ul>
      </div>
      <div class="common-title">
        <img class="tit-icon" src="../../../../static/image/life/events/info-icon.png" alt="icon">
        <i class="tit-name">活动内容</i>
      </div>
      <div class="activity-information" v-html="infoDetail.profile">
      </div>
      <div class="activity-btns" v-if="infoDetail.status=='2'">
        <el-button type="primary" class="downLoad-btn" @click="approveActivity(1)">通过</el-button>
        <el-button type="danger" class="del-btn"  @click="approveActivity(3)">拒绝</el-button>
      </div>
    </section>

  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: this.$g.user_id,
      infoDetail: {},
      errorImg:
        'this.src="' +
        require("../../../../static/image/life/events/bg-img.png") +
        '"',
      reason: "",//拒绝理由
    };
  },
  created() {
    this.getDetail();
  },
  mounted() {

  },
  watch: {

  },
  computed: {

  },
  methods: {
    /**
 * 获取活动详情 
 */
    getDetail() {
      let success = (res => {
        this.infoDetail = res.data;
      })
      const params = {
        id: this.$route.params.id
      }
      this.$ajax.get('api/competition/activity', { params, func: { success: success } });
    },
        /**
     * 活动审批
     *status 1：通过；3：拒绝
     */
    approveActivity(status) {
      this.reason = "";
      let params = {
        id: this.$route.params.id,
        status: status,
        reason: this.reason
      };
      if (status == 3) {
        this.$prompt("", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "messageBox",
          inputType: "textarea",
          inputPlaceholder: "请输入拒绝理由",
          inputPattern: /^[\S]{1,140}$/,
          inputErrorMessage: "拒绝理由不能为空，且不能超过140个字符"
        })
          .then(({ value }) => {
            if (is_empty(value)) {
              this.$message.warning("请输入拒绝理由");
            } else {
              this.reason = value;
              params.reason = value;
              this.change(params);
            }
          })
          .catch(() => {});
      } else {
        this.change(params);
      }
    },
    change(params) {
      let success = data => {
        this.$message.success(data.msg);
        this.getDetail();
      };
      this.$ajax.post("api/competition/activity_approve", params, {
        func: { success: success }
      });
    },
    /**
     * 返回上一级
     */
    goBack() {
      this.$router.go(-1);
    },
    /**
  * 查看名单
  */
    checkRegistration(id) {
      
      this.$router.push("/life/events/activity-registration/" + id);
    },

  },
};
</script>
<style lang="scss">
.common-title {
  height: 36px;
  line-height: 36px;
  background-color: #f0f8ff;
  .tit-icon {
    padding: 0 15px 0 20px;
  }
  .tit-icon,
  .tit-name {
    vertical-align: middle;
    font-style: normal;
  }
}
.details-info {
  padding: 32px 0;
  i {
    font-style: normal;
  }
  li {
    padding: 10px 0;
  }
  .title-name {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    color: #666;
    vertical-align: top;
  }
  .poster-img {
    display: inline-block;
    width: 390px;
    height: 180px;
  }
  .avatar-img {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 10px;
  }
  .avatar-img,
  .creater-name {
    vertical-align: middle;
  }
  .right-area {
    margin-right: 20px;
  }
}
.activity-information {
  padding: 30px 0;
}
.activity-btns {
  .el-button {
    padding: 0;
    width: 80px;
    height: 36px;
  }
}
.messageBox {
  border: none;
  .el-message-box__header {
    background-color: #338efc;
    padding: 12px 20px 12px;
  }

  .el-message-box__title {
    color: #fff;
    font-size: 16px;
  }
  .el-textarea__inner {
    min-height: 126px !important;
  }
  .el-message-box__headerbtn {
    top: 8px;
  }

  .el-message-box__headerbtn .el-icon-close {
    color: #fff;
    font-size: 24px;
  }

  .el-message-box__headerbtn .el-icon-close:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>